<template>
    <div class="photoinfo">
       <div v-for="item in photosm" :key="item.id">
            <h1 class="photoinfo-title">{{ item.title }}</h1>
            <div class="photoinfo-time">
                <span>发布时间: {{ item.add_time | filters }}</span>
                <span>点击: {{ item.click }}次</span>
            </div>
            <hr>
            <!-- 缩略图区域 -->
            <!-- <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.id">  
             -->
             <div id="tt">
                  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
             </div>
            <div class="photoinfo-con" v-html="item.content"></div>
            <!-- 评论组件 -->
            <!-- 父组件向子组件传值 -->
            <photosCom :id="id"> </photosCom> 
        </div>
    </div>
</template>

<script>
    //加载评论子组件
    import comment from '../subcomponent/comment.vue'
    import { Toast } from 'mint-ui'
    export default {
        data: function(){
            return {
                //这里获取的id是加上100之后的id，因为服务端要处理不同的数据，在服务端已经有评论0-100之间的了
                //所以为了区别，要在id上加上100,
                //但是这里的id有两个作用，一个请求评论，另一个是请求图片详情，所以图片详情可以在减掉100，由于是
                //字符串，可以用substr进行字符串裁剪
                id: this.$route.query.id, //接受点击链接传过来的参数
                //存储图片详情的数组
                photosm: [],
                slide1: []
            }
        },
        created: function(){
    
             console.log(this.id)
            this.getphotoscom(this.id)
            this.getsuolvetu(this.id)
        },
        methods: {
            getphotoscom: function(id){
                //父组件向数据库请求图片的相关信息
                    var tt= id.substr(2,1)
                this.$http.get('http://127.0.0.1:4000/api/getimageInfo/?imgid='+tt).then(function(res){
                    if(res.body.message != 'ok' || res.body.success != true){
                        return Toast('获取图片详情失败')
                    }
                    this.photosm = res.body.photosm
                })
            },
            getsuolvetu: function(id){
                 //父组件向数据库请求图片缩略图的相关信息
                    var th= id.substr(2,1)
                    this.$http.get('http://127.0.0.1:4000/api/getthumimages/?imgid='+th).then( res => {
                        //  console.log(res.body.suolvetudata)
                         res.body.suolvetudata.forEach(function(item,i){
                            item.w= 600
                            item.h= 400
                         });
                         this.slide1=  res.body.suolvetudata
                        
                    })                 
            },
              handleClose () {
                     console.log('close event')
                            }
        },
        //接受到子组件之后要在这里初始化一下，才能用
        components: {
            'photosCom': comment
        }
    }

</script>

<style lang="scss" scoped>

    .photoinfo {
        padding-top: 10px;
        .photoinfo-title{
            line-height: 30px;
            font-size: 18px;
            text-align: center;
            color: #26A2FF;
        }
        .photoinfo-time{
            font-size: 14px;
            color: rgb(121, 118, 118);
            display: flex;
            justify-content: space-between;
        }
        .photoinfo-con {
            font-size: 16px;
            text-indent: 2em
        }

           
    }
        
    
</style>